<template>
  <div>
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品货号" prop="hao">
          <el-input v-model="ruleForm.hao"></el-input>
        </el-form-item>
        <el-form-item label="上架状态" prop="date1">
          <el-select v-model="ruleForm.date1" placeholder="全部">
            <el-option label="上架" value="shanghai"></el-option>
            <el-option label="下架" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态" prop="date2">
          <el-select v-model="ruleForm.date2" placeholder="全部">
            <el-option label="未审核" value="shanghai"></el-option>
            <el-option label="以审核" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            查询
          </el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border>
        <el-table-column label="编号" width="80">
          <input type="radio" name="love" />
        </el-table-column>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="factoryStatus"
          label="审核状态"
          width="120"
        ></el-table-column>
        <!-- <el-table-column prop="" label="商品图片" width="300">
          <template>
            <img
              src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/timg(5).jpg"
              alt=""
            />
          </template>
        </el-table-column> -->
        <el-table-column label="SKU库存" width="100">
          <template slot-scope="scope">
            <el-button @click='Cshow()' class="dian" type="text">
             <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">
              查看
            </el-button>
            <el-button type="text" @click="handleClick()" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
<!-- 弹出层 -->


<div v-show="show">
  <div class="el-dialog" style="width: 40%; margin-top: 15vh;">
    <div class="el-dialog__header">
      <span class="el-dialog__title">
        编辑货品信息
      </span>
      <button @click='Cshow()' type="button" aria-label="Close" class="el-dialog__headerbtn">
        <i class="el-dialog__close el-icon el-icon-close">
        </i>
      </button>
    </div>
    <div class="el-dialog__body">
      <span>
        商品货号：
      </span>
      <span>
        6946605
      </span>
      <div class="el-input el-input--small el-input-group el-input-group--append"
      style="width: 50%; margin-left: 20px;">
        <input type="text" autocomplete="off" placeholder="按sku编号搜索" class="el-input__inner">
        <div class="el-input-group__append">
          <button type="button" class="el-button el-button--default">
            <i class="el-icon-search">
            </i>
          </button>
        </div>
      </div>
      <div class="el-table el-table--fit el-table--border el-table--scrollable-x el-table--enable-row-hover el-table--enable-row-transition"
      style="width: 100%; margin-top: 20px;">
        <div class="hidden-columns">
 
        </div>
        <div class="el-table__header-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__header"
          style="width: 500px;">
            <colgroup>
              <col name="el-table_9_column_61" width="80">
                <col name="el-table_9_column_65" width="80">
                  <col name="el-table_9_column_66" width="80">
                    <col name="el-table_9_column_62" width="80">
                      <col name="el-table_9_column_63" width="80">
                        <col name="el-table_9_column_64" width="100">
                          <col name="gutter" width="0">
            </colgroup>
            <thead class="has-gutter">
              <tr class="">
                <th colspan="1" rowspan="1" class="el-table_9_column_61  is-center   is-leaf">
                  <div class="cell">
                    SKU编号
                  </div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_9_column_65  is-center   is-leaf">
                  <div class="cell">
                    颜色
                  </div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_9_column_66  is-center   is-leaf">
                  <div class="cell">
                    容量
                  </div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_9_column_62  is-center   is-leaf">
                  <div class="cell">
                    销售价格
                  </div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_9_column_63  is-center   is-leaf">
                  <div class="cell">
                    商品库存
                  </div>
                </th>
                <th colspan="1" rowspan="1" class="el-table_9_column_64  is-center   is-leaf">
                  <div class="cell">
                    库存预警值
                  </div>
                </th>
                <th class="gutter" style="width: 0px; display: none;">
                </th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-right">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
          style="width: 500px;">
            <colgroup>
              <col name="el-table_9_column_61" width="80">
                <col name="el-table_9_column_65" width="80">
                  <col name="el-table_9_column_66" width="80">
                    <col name="el-table_9_column_62" width="80">
                      <col name="el-table_9_column_63" width="80">
                        <col name="el-table_9_column_64" width="100">
            </colgroup>
            <tbody>
              <tr class="el-table__row">
                <td class="el-table_9_column_61 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" value='2018' autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_65 is-center ">
                  <div class="cell">
                    金色
                  </div>
                </td>
                <td class="el-table_9_column_66 is-center ">
                  <div class="cell">
                    16G
                  </div>
                </td>
                <td class="el-table_9_column_62 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_63 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_64 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <!---->
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="el-table__row">
                <td class="el-table_9_column_61 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" value='2018' autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_65 is-center ">
                  <div class="cell">
                    金色
                  </div>
                </td>
                <td class="el-table_9_column_66 is-center ">
                  <div class="cell">
                    32G
                  </div>
                </td>
                <td class="el-table_9_column_62 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_63 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_64 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="el-table__row">
                <td class="el-table_9_column_61 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" value='2018' autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_65 is-center ">
                  <div class="cell">
                    银色
                  </div>
                </td>
                <td class="el-table_9_column_66 is-center ">
                  <div class="cell">
                    16G
                  </div>
                </td>
                <td class="el-table_9_column_62 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_63 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_64 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="el-table__row">
                <td class="el-table_9_column_61 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" value='2018' autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_65 is-center ">
                  <div class="cell">
                    银色
                  </div>
                </td>
                <td class="el-table_9_column_66 is-center ">
                  <div class="cell">
                    32G
                  </div>
                </td>
                <td class="el-table_9_column_62 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_63 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
                <td class="el-table_9_column_64 is-center ">
                  <div class="cell">
                    <div class="el-input">
                      <input type="text" autocomplete="off" class="el-input__inner">
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="el-table__column-resize-proxy" style="display: none;">
        </div>
      </div>
    </div>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
        <button @click='Cshow()' type="button" class="el-button el-button--default">
          <span>
            取 消
          </span>
        </button>
        <button type="button" @click="que" class="el-button el-button--primary">
          <span>
            确 定
          </span>
        </button>
      </span>
    </div>

  </div>
  <div  @click='Cshow()' class="hui"></div>
</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick(row) {
      this.$router.push('/pms/addProduct')
    },
    Cshow(){
      this.show=this.show?false:true
    },
    que(){
      this.$confirm('是否进行修改', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 查询
    submitForm(formName) {
      this.axios
        .get('/brand/list', {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            Authorization: localStorage.getItem('token'),
          },
          keyword: this.ruleForm.name,
          pageNum: 1,
          pageSize: 1,
        })
        .then((res) => {
        //   console.log(res)
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
          }
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  mounted() {
    this.axios
      .get('/brand/listAll', {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          Authorization: localStorage.getItem('token'),
        },
      })
      .then((res) => {
        // console.log(res.data.data)
        if (res.data.code === 200) {
          this.tableData = res.data.data
        }
      })
  },
  data() {
    return {
      show:false,
      tableData: [],
      ruleForm: {
        name: '',
        hao: '',
        date1: '',
        date2: '',
      },
    }
  },
}
</script>
<style lang="scss" scoped>
.el-dialog{    
  position:fixed;
  top:20px;
  left:50%;
  margin-left:-20%;
  z-index:100;
}
.hui{
  position:fixed;top:0;left:0;
  background:rgba(128,128,128,0.5);
  width:100vw;
  height:100vh;
  z-index:99;
}

.el-form {
  line-height: 40px;
  padding: 10px 20px;
  text-align: left;
  border:1px solid #eee;margin-bottom:20px
}
.el-form-item {
  width: 40%;
  display: inline-block;
}
.dian{color: #fff;
    border-radius: 50%;
    padding: 12px;
    background-color: #409eff;
    border-color: #409eff
    }
.el-drawer{
  width:50% !important
}

</style>
